<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="popup.js" type="module"></script>
  <style>
    body {
      width: 260px;
      height: 180px;
      padding: 0;
      margin: 0;
      font-family: "microsoft yahei,pingfang,sans-serif";
    }

    .p_ant-input {
      box-sizing: border-box;
      margin: 0;
      padding: 4px 11px;
      color: rgba(0, 0, 0, 0.88);
      font-size: 14px;
      line-height: 1.5714285714285714;
      list-style: none;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
      position: relative;
      display: inline-block;
      width: 100%;
      min-width: 0;
      background-color: #ffffff;
      background-image: none;
      border-width: 1px;
      border-style: solid;
      border-color: #d9d9d9;
      border-radius: 6px;
      transition: all 0.2s;
    }

    .p_ant-input:focus {
      border-color: #4096ff;
      box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
      border-inline-end-width: 1px;
      outline: 0;
    }

    .p_ant-btn {
      outline: none;
      position: relative;
      display: inline-block;
      font-weight: 400;
      white-space: nowrap;
      text-align: center;
      background-image: none;
      background-color: transparent;
      border: 1px solid transparent;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      user-select: none;
      touch-action: manipulation;
      line-height: 1.5714285714285714;
      color: rgba(0, 0, 0, 0.88);
    }

    .p_ant-btn {
      font-size: 14px;
      height: 32px;
      padding: 4px 15px;
      border-radius: 6px;
    }

    .p_ant-btn-default {
      background-color: #ffffff;
      border-color: #d9d9d9;
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
    }

    .p_ant-btn-default:not(:disabled):active {
      color: #0958d9;
      border-color: #0958d9;
    }

    .p_ant-btn-default:not(:disabled):hover {
      color: #4096ff;
      border-color: #4096ff;
    }

    p {
      margin: 8px 0px;
    }

    /*!
 * 
 * antd v4.24.16
 * 
 * Copyright 2015-present, Alipay, Inc.
 * All rights reserved.
 *       
 */
    [class*=ant-]::-ms-clear,
    [class*=ant-] input::-ms-clear,
    [class*=ant-] input::-ms-reveal,
    [class^=ant-]::-ms-clear,
    [class^=ant-] input::-ms-clear,
    [class^=ant-] input::-ms-reveal {
      display: none
    }

    input::-ms-clear,
    input::-ms-reveal {
      display: none
    }

    *,
    :after,
    :before {
      box-sizing: border-box
    }

    html {
      font-family: sans-serif;
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      -ms-overflow-style: scrollbar;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    }

    .ant-switch {
      margin: 0;
      padding: 0;
      color: rgba(0, 0, 0, .85);
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5715;
      list-style: none;
      font-feature-settings: "tnum";
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      min-width: 44px;
      height: 22px;
      line-height: 22px;
      vertical-align: middle;
      background-color: rgba(0, 0, 0, .25);
      border: 0;
      border-radius: 100px;
      cursor: pointer;
      transition: all .2s;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none
    }

    .ant-switch:focus {
      outline: 0;
      box-shadow: 0 0 0 2px rgba(0, 0, 0, .1)
    }

    .ant-switch-checked:focus {
      box-shadow: 0 0 0 2px #e6f7ff
    }

    .ant-switch:focus:hover {
      box-shadow: none
    }

    .ant-switch-checked {
      background-color: #1890ff
    }

    .ant-switch-disabled,
    .ant-switch-loading {
      cursor: not-allowed;
      opacity: .4
    }

    .ant-switch-disabled *,
    .ant-switch-loading * {
      box-shadow: none;
      cursor: not-allowed
    }

    .ant-switch-inner {
      display: block;
      margin: 0 7px 0 25px;
      color: #fff;
      font-size: 12px;
      transition: margin .2s
    }

    .ant-switch-checked .ant-switch-inner {
      margin: 0 25px 0 7px
    }

    .ant-switch-handle {
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px
    }

    .ant-switch-handle,
    .ant-switch-handle:before {
      position: absolute;
      transition: all .2s ease-in-out
    }

    .ant-switch-handle:before {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: #fff;
      border-radius: 9px;
      box-shadow: 0 2px 4px 0 rgba(0, 35, 11, .2);
      content: ""
    }

    .ant-switch-checked .ant-switch-handle {
      left: calc(100% - 20px)
    }

    .ant-switch:not(.ant-switch-disabled):active .ant-switch-handle:before {
      right: -30%;
      left: 0
    }

    .ant-switch:not(.ant-switch-disabled):active.ant-switch-checked .ant-switch-handle:before {
      right: 0;
      left: -30%
    }

    .ant-switch-loading-icon.anticon {
      position: relative;
      top: 2px;
      color: rgba(0, 0, 0, .65);
      vertical-align: top
    }

    .ant-switch-checked .ant-switch-loading-icon {
      color: #1890ff
    }

    .ant-switch-small {
      min-width: 28px;
      height: 16px;
      line-height: 16px
    }

    .ant-switch-small .ant-switch-inner {
      margin: 0 5px 0 18px;
      font-size: 12px
    }

    .ant-switch-small .ant-switch-handle {
      width: 12px;
      height: 12px
    }

    .ant-switch-small .ant-switch-loading-icon {
      top: 1.5px;
      font-size: 9px
    }

    .ant-switch-small.ant-switch-checked .ant-switch-inner {
      margin: 0 18px 0 5px
    }

    .ant-switch-small.ant-switch-checked .ant-switch-handle {
      left: calc(100% - 14px)
    }

    .ant-switch-rtl {
      direction: rtl
    }

    .ant-switch-rtl .ant-switch-inner {
      margin: 0 25px 0 7px
    }

    .ant-switch-rtl .ant-switch-handle {
      right: 2px;
      left: auto
    }

    .ant-switch-rtl:not(.ant-switch-rtl-disabled):active .ant-switch-handle:before {
      right: 0;
      left: -30%
    }

    .ant-switch-rtl:not(.ant-switch-rtl-disabled):active.ant-switch-checked .ant-switch-handle:before {
      right: -30%;
      left: 0
    }

    .ant-switch-rtl.ant-switch-checked .ant-switch-inner {
      margin: 0 7px 0 25px
    }

    .ant-switch-rtl.ant-switch-checked .ant-switch-handle {
      right: calc(100% - 20px)
    }

    .ant-switch-rtl.ant-switch-small.ant-switch-checked .ant-switch-handle {
      right: calc(100% - 14px)
    }

    .user {
      width: 100%;
      height: 50px;
      line-height: 50px;
      color: #333333;
      font-size: 16px;
      font-weight: 600;
      padding-left: 20px;
      border-bottom: 1px solid #f0eeee;
    }

    .container {
      padding: 10px;
    }

    .accout,
    .settings {
      position: relative;
      height: 56px;
      font-size: 16px;
      padding-left: 40px;
      line-height: 56px;
      color: #666666;
    }

    .accout .icon,
    .settings .icon {
      position: absolute;
      top: 50%;
      left: 8px;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      background-position: 0% 0%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }


    .icon-accout {
      background-image: url('../src/assets/icon-accout.png');
    }

    .icon-settings {
      background-image: url('../src/assets/icon-settings.png');
    }


    .history,
    .icon-float {
      position: relative;
      box-sizing: border-box;
      padding: 0 14px;
      height: 52px;
      width: 100%;
      line-height: 52px;
      font-size: 16px;
      color: #333333;
      background: #FCFCFC;
      border: 1px solid rgba(239, 239, 239, 1);
      border-radius: 4px;
    }
  </style>
</head>

<body>
  <div class="user">插件设置</div>
  <div class="container">
    <!-- <div class="accout">
      <div class="icon icon-accout"></div>账户
    </div>
    <div class="history">历史记录</div> -->
    <div class="settings">
      <div class="icon icon-settings"></div>设置
    </div>
    <div class="icon-float">悬浮按钮<button style="position: absolute;right:18px;top:20px" size="small" type="button"
        id="switchFloat" role="switch" aria-checked="false" class="ant-switch-small ant-switch">
        <div class="ant-switch-handle"><!----></div><span class="ant-switch-inner"><span
            class="ant-switch-inner-checked"><!----></span><span
            class="ant-switch-inner-unchecked"><!----></span></span>
      </button>
    </div>
  </div>

</body>

</html>